<template>
    <div class="optioncity">
        <Row :gutter="8" type="flex">
            <Col v-for="item in dataing" :key="item.value">
                <Button
                    :type="parseInt(check_id) === parseInt(item.value) ? 'primary' : 'default'"
                    style="margin-top:5px"
                    @click="checkOption(item)"
                >
                    {{ item.label }}
                </Button>
            </Col>
        </Row>
    </div>
</template>

<script>
export default {
    props: {
        // 省市区类型
        type: {
            type: [String],
            default: 'province'
        },
        // 选中值
        value: {
            type: [Array],
            default: function () {
                return []
            }
        }
    },
    name: 'optioncity',
    data() {
        return {
            check_id: '',// 选中ID
            // datas: [],// 数据
            datas_map: {},// 映射数据
        }
    },
    computed: {
        dataing() {
            let data = []
            if (JSON.stringify(this.datas_map) !== "{}") {
                if (this.type === 'province') {
                    data = this.datas_map
                    this.check_id = this.value[0] !== undefined ? this.value[0] : '';
                } else if (this.type === 'city') {
                    if (this.value[0] !== undefined && this.datas_map[this.value[0]] !== undefined) {
                        data = this.datas_map[this.value[0]].children;
                    }
                    this.check_id = this.value[1] !== undefined ? this.value[1] : '';
                } else {
                    if (this.value[0] !== undefined && this.value[1] !== undefined && this.datas_map[this.value[0]].children[this.value[1]] !== undefined) {
                        data = this.datas_map[this.value[0]].children[this.value[1]].children;
                    }
                    this.check_id = this.value[2] !== undefined ? this.value[2] : '';
                }
            }
            return data
        }
    },
    mounted() {
        // this.datas = JSON.parse(localStorage.getItem('cityarray'))
        this.datas_map = JSON.parse(localStorage.getItem('cityarray_map'))
    },
    methods: {
        initData() {
            if (this.type === 'province') {
                this.check_id = this.value[0] !== undefined ? this.value[0] : '';
            } else if (this.type === 'city') {
                this.check_id = this.value[1] !== undefined ? this.value[1] : '';
            } else {
                this.check_id = this.value[2] !== undefined ? this.value[2] : '';
            }
        },
        checkOption(item) {
            if (this.check_id !== item.value) {
                this.check_id = item.value;
                this.$emit('checkOption', item)
            } else {
                this.check_id = ''
                this.$emit('checkOption', false)
            }
        }
    },
}
</script>
<style lang="less" scoped>
.optioncity{
    width: 360px;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    &-con{
        min-width: 42px;
        // background: #f3f3f3;
        background: #fff;
        margin-top: 8px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
        color: rgba(43, 133, 228, 0.9);
        padding: 5px;
        border-radius: 5px;
    }
    &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
    }
    &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #dcdee2;
    }
    &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #ededed;
    }
}
</style>